<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue</title>
  </head>
  <body>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <div id="app">
        <div v-color="color">color</div>
        <button @click="changeToRed">变红</button>
    </div>
    <script>
        Vue.directive('color',{
           //当本DOM元素创建之后先调用bind
           //然后会把DOM元素添加到父DOM上进行渲染。inserted
            bind(el,binding){
                el.style.color = binding.value;
            },
            //在元素的数据或者说值发生变化时调用
            update(el,binding){
                el.style.color = binding.value;
            }
        });
        var vm = new Vue({
            el:'#app',
            data:{color:'green'},
            methods:{
              changeToRed(){
                this.color = 'red'
              }
            }
        })
    </script>
  </body>
</html>
